<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>陌陌酒店平台</title>
<!-- Stylesheets -->
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/revolution-slider.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="static/images/favicon.ico" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="static/css/responsive.css" rel="stylesheet">
	<script type="text/javascript" src="static/jquery/jquery-2.1.1.min.js"></script>

	<script type="text/javascript">
		function submitBtn() {
			var datepicker = $("#datepicker").val();    // 获取id为datepicker的<input>框数据
			var datepickerone = $("#datepickerone").val();    // 获取id为datepickerone的<input>框数据
			var phone = $("#phone").val();    // 获取id为phone的下拉框数据
			// 判断
			if (datepicker.length == 0) {
				alert("请选择到达日期");
				return;
			}
			if (datepickerone.length == 0) {
				alert("请选择离开日期");
				return;
			}
			if (datepickerone < datepicker) {
				alert("离开日期必须比入住日期晚");
				return;
			}
			if (phone.length == 0) {
				alert("请填写联系方式");
				return;
			}
			var data={"arrivalDate": datepicker, "departureDate": datepickerone, "phone":phone}
			// Ajax提交数据
			$.ajax({
				url: "/bookRoom",    // 提交到controller的url路径
				type: "post",    // 提交方式
				data: JSON.stringify(data),
				contentType:"application/json;charset=utf-8",
				success: function (returnData) {    // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值
					alert(returnData);
					if (returnData != "请登陆") {
						if (returnData == "加入购物车成功") {
							location.href = "rooms-detail.html";
							return;
						} else {
							location.href = "rooms-detail.html";
							return;
						}
					}else {
						location.href = "login1.html";
					}
				},
			});
		}
	</script>


</head>


<body>
<div class="page-wrapper">

	<header class="header" id="header"></header>
	<script type="text/javascript">
		/*引入Header部分公共代码*/
		//登录成功回显用户信息
		$(function(){
			$("#header").load('header.html',function () {
				$.ajax({
					type:"post",
					url:"getUserBySession",
					contentType: "application/json; charset=utf-8",
					async:true,
					success:function(data){
						console.log(data.username)
						if (data.username ===undefined) {
							//$(".userIcon").text(data.username)
						}else {
							//console.log("ttttttt"+data.username);

							$(".userIcon").text(data.username);
							$(".userReg").css("display","none");
							$(".userLog").text("切换用户");
						}
					},
					error: function (xhr) {
						alert("异常");
					}
				});
			})
		});
	</script>
    <!-- main header area end -->

	<script>
		$(function () {
			$.ajax({
				//提交数据的类型 POST GET
				type:"POST",
				//提交的网址
				url:"selectRoomById1",
				dataType:"json",
				async:false,
				//成功返回之后调用的函数
				contentType:"application/json",
				success:function(returnData){
						//获取ID
						var id = returnData.id;
						//获取房间编号
						var roomId = returnData.roomID;
						console.log(roomId)
						//获取房间可住最多人数
						var num = returnData.num;
						//获取房间类型
						var roomType = returnData.roomType;
						//获取图片路径（或者是名字）
						var pic = returnData.pic;
						//获取酒店人均价格
						var roomPrice = returnData.roomPrice;
						//获取房间描述
						var roomDescribe = returnData.roomDescribe;
						//获取房间押金
						var pledge = returnData.pledge;
						$("#pic").append("\n" +
								"                            <figure><img src=\"static/images/rooms/"+pic+"\" alt=\"\"></figure>\n" +
								"                        ")
						$("#hotelroom").append("\n" +
								"                            <h2>"+roomType+"&nbsp;"+roomId+"</h2>\n" +
								"                            	<div class=\"text\"><span>"+roomPrice+"</span> 元/ 晚</div>\n" +
								"                           		<div class=\"text\">押金：<span>"+pledge+"</span> 元</div>\n" +
								"                           		<div class=\"text\">可住：<span>"+num+"</span> 人</div>\n" +
								"									<ul class=\"rating\">\n" +
								"										<li><i class=\"fa fa-star\" aria-hidden=\"true\"></i></li>\n" +
								"										<li><i class=\"fa fa-star\" aria-hidden=\"true\"></i></li>\n" +
								"										<li><i class=\"fa fa-star\" aria-hidden=\"true\"></i></li>\n" +
								"										<li><i class=\"fa fa-star\" aria-hidden=\"true\"></i></li>\n" +
								"										<li><i class=\"fa fa-star\" aria-hidden=\"true\"></i></li>\n" +
								"									</ul>\n" +
								"                        ")
						$("#roomDescribe").append("\n" +
								"									<p>"+roomDescribe+"</p>" +
								"                        ")
				},
				//调用出错执行的函数
				error: function(responseText){
					//请求出错处理
					console.error(responseText);
				}
			});
		})
	</script>

     <!--Page Title-->
    <section class="page-title text-center">
        <div class="auto-container">
            <div class="content-box">
                <div class="title">房间详情</div>
                <ul class="bread-crumb">
                    <li><a href="index.html">主页<i class="fa fa-angle-right"></i></a></li>
                    <li>房间详情</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- rooms details section -->
    <section class="rooms-details">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-sm-8 col-xs-12">
    				<div class="rooms-details-content">
    					<div class="img-box">
							<div id="pic">
								<!--房间照片-->
							</div>
    					</div>
    					<div class="lower-content">
							<div id="hotelroom">
								<!--房间信息-->
							</div>
    					</div>
    					<div class="rooms-catagori">
    						<h3>房间简介</h3>
    						<div class="row">
								<div style="margin-left: 15px" id="roomDescribe">
									<!--房间描述-->
								</div>
    							<!--<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>双人</li>
    									<li>空调</li>
    								</ul>
    							</div>-->
    						</div>
    					</div>
						<div id="selectComment" class="comment-area">
							<div class="comment-title"><h3 id="count"></h3></div>
							<!-- 评论 -->
						</div>
    					<div class="client-reviews">
							<div class="comment-form">
								<div class="comment-title"><h3>发表评价</h3></div>
								<form id="contact-form" name="contact_form" class="default-form">
									<div class="row">
										<div class="col-md-12 col-sm-12 col-xs-12">
											<textarea placeholder="你的评价" id="comment_content" name="comment_content" required=""></textarea>
										</div>
									</div>
									<button type="button" id="addComment" class="btn-one" data-loading-text="Please wait...">提交</button>
								</form>
							</div>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-4 col-sm-6 col-xs-12">
    				<div class="sidbar-content">
	    				<h3>客房预定</h3>
	                    <div class="date">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	    					<input type="text" name="date" placeholder="抵达日期" id="datepicker">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	                    	<input type="text" name="date" placeholder="离开日期" id="datepickerone">
	                    </div>
						<div>
							<input style="margin-bottom: 10px "type="phone" id="phone" name="phone" value="" placeholder="联系方式" required="">
						</div>
						<a href="#" class="btn-one" onclick="submitBtn()">预约</a>
	    			</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- rooms details section end -->

	<!--页眉-->
	<div class="footer" id="footer" ></div>
	<script type="text/javascript">
		/*引入Header部分公共代码*/
		$(function(){
			$.ajax({
				type:"get",
				url:"footer.html",
				async:true,
				success:function(data){
					$("#footer").html(data);
				}
			});
		});
	</script>


	<script>
		<!-- 获取评价 -->
		$(function () {
			$.ajax({
				//提交数据的类型 POST GET
				type: "POST",
				//提交的网址
				url: "/selectEvaluations",
				dataType: "json",
				async: false,
				//成功返回之后调用的函数
				contentType: "application/json",
				success: function (returnData) {
						$("#count").html("评价" + "(" + returnData.length + ")")
						$.each(returnData, function (i, value) {
							//获取数据库日期
							var now = new Date(value.time);
							//获取日期年份
							var year = now.getFullYear();
							//获取日期月份
							var month = (now.getMonth() + 1).toString();
							//获取日期天数
							var day = (now.getDate()).toString();
							//获取用户名
							var username = value.username;
							$("#selectComment").append("<div class=\"comment-box\">\n" +
									"    <figure><img src=\"static/images/news/comment-1.png\"  alt=\"\"></figure>\n" +
									"     <div class=\"comment-inner\">\n" +
									"         <div  class=\"comment-name\" id=\"comment-name\">" + username + "</div>\n" +
									"            <div class=\"comment-info\" id=\"comment-info\"><i class=\"fa fa-calendar\"></i>&nbsp;" + year + '年' + month + '月' + day + '日' + "</div>\n" +
									" 	          <p  id=\"remark\">" + value.content + "</p>\n" +
									"            </div>\n" +
									"          </div><br><br><br><br>")
						});
				},
				//调用出错执行的函数
				error: function (responseText) {
					//请求出错处理
					console.error(responseText);
				}
			})
		})
	</script>
	<script>
		<!-- 添加评价 -->
		$("#addComment").bind("click", function () {
			$.ajax({
				//提交数据的类型 POST GET
				type: "POST",
				//提交的网址
				url: "addEvaluation",
				data: {
					"comment_content":$("#comment_content").val()
				},
				success: function (returnData) {
					if (returnData == "请登陆"){
						alert(returnData);
						location.href = "login1.html";
					}else {
						alert(returnData);
						if (returnData == ("评价内容不能为空") || returnData == ("评价失败")) {
						} else {
							window.location.href = "rooms-detail.html";
						}
					}
				},
				//调用出错执行的函数
				error: function (responseText) {
					//请求出错处理
					console.error(responseText);
				}
			});

		});
	</script>
    
</div>
<!--End pagewrapper-->


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-angle-up"></span></div>


<!-- jQuery js -->

<script src="static/js/map-script.js"></script>
<script type="text/javascript" src="static/js/jquery-2.1.4.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery.themepunch.tools.min.js"></script>
<script src="static/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="static/js/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="static/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="static/js/jquery.appear.js"></script>
<script type="text/javascript" src="static/js/jquery.countTo.js"></script>
<script src="static/js/isotope.js"></script>
<script src="static/js/jquery.fancybox.pack.js"></script>
<script src="static/js/jquery.fancybox-media.js"></script>
<script src="static/js/owl.js"></script>
<script src="static/js/masterslider.js"></script>
<script type="text/javascript" src="static/js/jquery.polyglot.language.switcher.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="static/js/jquery.mixitup.min.js"></script>
<script src="static/js/validate.js"></script>
<script src="static/js/wow.js"></script>
<script src="static/js/script.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>

<script src="static/js/timePicker.js"></script>
<script src="static/js/jquery-ui.js"></script>

<script src="static/js/validation.js"></script>


<!-- End of .page_wrapper -->

</body>
</html>
